{template 'pc_header'}
<link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/app/css/screen_lottory_free.css">
<style>
::-webkit-scrollbar-track-piece {
 background-color: rgba(0,0,0,0.6);
 border:0;border-radius: 8px;
}
::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 border:0;border-radius: 8px;
}
::-webkit-scrollbar-thumb {
 background-color: #ccc;
 background-clip: padding-box;
 min-height: 28px;
 border:0;border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
 background-color: rgba(0, 177, 7, 1);
 border:0;border-radius: 8px;
}
.member-list {height: 70%;overflow: scroll;}
.jiabin { height: 100%;width: 100%; overflow:auto;box-sizing: border-box; position:relative;/*border:1px solid rgba(255, 255, 255, 0.15);background-color: rgba(0, 0, 0, 0.3);*/}
.jiabin ul { height: 100%;list-style:none;box-sizing: border-box;margin: 0;padding:0;}
.jiabin li { float:left; width: 25%;height: 50%; cursor:pointer;opacity:0; display:none;}
.jiabin li .jiabink{ padding:10px; text-align:center; height: 100%;box-sizing: border-box; position:relative;}
.jiabin li .jiabintx{ height: 100%; width:100%;margin: 0;border-radius: 10px;overflow: hidden;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);}
.jiabin li .jiabinmz{ position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
margin: 0;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.65);
font-size: 24px;
color: #fff;overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;border-radius: 0 0 10px 10px;overflow: hidden;opacity:0;}

.jiabin li:hover .jiabintx {box-shadow: 0 0 0 5px rgba(255, 255, 255, 1) inset, 0 1px 10px rgba(0, 0, 0, 0.6);}
.jiabin li:hover .jiabinmz {background-color: #fff;color: #000;-moz-transition: all 0.4s ease-out 0s;
-webkit-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}

 li.view{-webkit-animation:vv 2.5s 0s ease forwards; -moz-animation:2.5s 0s ease forwards ;opacity:1; display: block;}
.view .jiabinmz{-webkit-animation:bb 1.5s 1s ease forwards; -moz-animation:1.5s 1s ease forwards ;}
@-webkit-keyframes vv{
0%{-webkit-transform: scale(0.6);opacity:0;border-radius:100%;}
50%{-webkit-transform: scale(1);opacity:1;border-radius:100%;}
100%{-webkit-transform: scale(1);opacity:1;border-radius:100%;}
}
@-webkit-keyframes bb{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:1;}
}


.jbshow{position: absolute;  display:none;z-index:9;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255,255,255,1);
z-index: 2;font-size:32px;box-sizing: border-box;padding:40px 16px 40px 40px;border-radius: 10px;}
.jbshow p{ padding:0; margin:0 auto;}
.jbshow .jbleft{ float:left; width:30%; height:100%; text-align:center;background-color: rgba(245, 245, 245, 1);
border-radius: 10px;overflow: hidden; position:relative;}
.jbshow .jbmz{ padding: 15px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.45);
color: #fff;}
.jbshow .jbright{ margin-left:30%; height:100%; text-align:center;overflow: auto;}
.jbshow .bjbj{ padding:0 32px 0 40px;line-height: 46px; text-align:left;}
.jbshow .closeico{
position: absolute;
display: block;
width: 30px;
height: 30px;
right: 6px;
top: 6px;
background: #333;
border-radius: 50%;
text-indent: -9999px;
z-index: 3;cursor:pointer;
}
.jbshow .closeico:hover{
background: rgba(0, 177, 7, 1);
}
.jbshow .closeico:before {
position: absolute;
top: 5px;
left: 14px;
content: "";
display: block;
width: 2px;
height: 20px;
background: #FFFFFF;-webkit-transform: rotate(45deg);
}
.jbshow .closeico:after {
position: absolute;
top: 14px;
left: 5px;
content: "";
display: block;
width: 20px;
height: 2px;
background: #FFFFFF;-webkit-transform: rotate(45deg);
}
.jbshow.view {-webkit-animation:nn 2s 0s ease forwards; -moz-animation:2s 0s ease forwards ; display: block;}
@-webkit-keyframes nn{
0%{ -webkit-transform: translateY( 300px) scale(0.5);opacity:0; }
50%{-webkit-transform: translateY( 0) scale(1);opacity:1;}
100%{-webkit-transform: translateY( 0) scale(1);opacity:1;}
}
.jbshow.view2 {-webkit-animation:mm 1.5s 0s ease forwards; -moz-animation:1.5s 0s ease forwards ; display: block;}
@-webkit-keyframes mm{
0%{ -webkit-transform: translateY( 0) scale(1);opacity:1;}
100%{-webkit-transform: translateY( 300px) scale(0.5);opacity:0;display: none;}
}
</style>
<script src="{MODULE_URL}template/mobile/app/js/qdbase.js?201523" type="text/javascript" charset="utf-8"></script>
<script src="{MODULE_URL}template/mobile/app/js/screen_qd.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="FUN WALL" {if !empty($basic_config['bg_vedio'])}data-vide-bg="{php echo tomedia($basic_config['bg_vedio'])}"{/if}>
{template 'top_panel'}
<div class="Panel Lottery" style="display: block; opacity: 1;">
   
   <div class="jbshow ">
   <b class="closeico" onClick="closeit()">关闭</b>
   <div class="jbleft" ><p class="jbmz"></p></div>
   <div class="jbright"><div class="bjbj"></div></div>
   
   </div>
   
   <div class="jiabin" id="ddd" >
   	<ul id="divDetail" >
    
					{loop $list $key $row}
        	    	<li id="dh{$key}"   ><div class="jiabink" ><p class="jiabintx"  onClick="showinfo({$row['id']})" style="background:url({php echo tomedia($row['tx'])}) no-repeat center 0; background-size:cover; "></p><p class="jiabinmz">{$row['name']}</p></div></li>
					{/loop}
    </ul>
   </div>
      
    
    
    
    
</div>
<script>
 function senddh(n){
 
 var count2=$('#divDetail li').size();
//div.scrollTop;
if(n<=count2){
 $("#dh"+n).addClass('view');
 
 var div = document.getElementById('divDetail'); 
 
document.getElementById('ddd').scrollTop= div.scrollHeight; 
n=n+1;
setTimeout("senddh("+n+")",1000);
}else{
//setTimeout("senddh2("+n+")",60000);

 //setTimeout("getjson("+0+")",1000);
}


 }
 
 
 
 function showinfo(mid){
 
 
$.getJSON(Path_url('jb_show'), {
				rid: scene_id,
				jb_id:mid
			},function(d){
  
   
 
$(".jbleft").css({"background":"url("+d.data.tx+") no-repeat center 0","background-size":"cover"});
$(".bjbj").html(d.data.des);
$(".jbmz").html(d.data.name);
 $(".jbshow").removeClass('view2');
 	 $(".jbshow").addClass('view');
  
});	 
  			 
 }
 
 function closeit(){
 
  $(".jbshow").removeClass('view');
$(".jbshow").addClass('view2');
 }
 
</script>
 {template 'pc_footer'}